<template>
  <div :id="main" style="width: 1250px; height: 629px"></div>
</template>

<script>
const axios = require("axios");
import * as echarts from "echarts";
export default {
  name: "teacher_kechengtongjitu",
  data() {
    return {
      t_bianhao: "",
      main: "",
    };
  },
  methods: {
    chaxun() {
      let _this = this;
      if (this.s_xuehao == "") {
        this.$router.push({ path: "/" });
      } else {
        axios
          .get("https://localhost:44391/api/teacher/chaxunkc", {
            params: {
              tbianhao: this.t_bianhao,
            },
          })
          .then(function (response) {
            // handle success
            console.log(response.data);
            //   let x = [];
            //   let y = [];
            let pie = [];
            response.data.forEach((element) => {
              pie.push({
                value: element.fenshu,
                name: element.sname_kname,
              });
            });
            _this.bingzhuang(pie);
          });
      }
    },
    bingzhuang() {
      var chartDom = document.getElementById(this.main);
      let newpro = new Promise((res) => {
        res();
      });
      newpro.then(() => {
      var myChart = echarts.init(chartDom);
      var option;

      var data = [];
      var time = [];
      // var starTime = 0.1 * 60 * 1000; // 这个是当前时间向前取值，我在这里设置的是半个小时
      var times = new Date; //X轴开始的时间，可以自行设置
      function initDate(value) {
        // value = value + Math.random() * 1 + 10;
        //时间格式化
        if (value < 9) {
          return "0" + value;
        } else {
          return value;
        }
      }
      for (var i = 0; i < 5; i++) {
                var hours = initDate(times.getHours());
                var minutes = initDate((times.getMinutes() + (i * 5)))
                if( minutes > 60){
                    minutes = minutes - 60
                    hours = hours + 1
                }
                time.push(hours + ':' + minutes  );
                data.push(Math.round(Math.random() * 1 + 2))
            }
      option = {
    title: {
        text: '每十秒签到学生人数折线统计图(每隔十秒自动刷新一次)'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            return params.name 
        },
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'category',
        splitLine: {
            show: false
        },
        data:time
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        }
    },
    series: [{
        name: '模拟数据',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: data
    }]
};
      setInterval(function () {
        var now = new Date();
        //这里就是先删除第一个，然后把当前时间放上去，可以根据需求进行改变
        time.shift();
        time.push(
          initDate(now.getMonth() + 1) +
            "/" +
            initDate(now.getDate()) +
            " " +
            initDate(now.getHours()) +
            ":" +
            initDate(now.getMinutes())
        );
        data.shift();
        data.push(Math.round(Math.random() * 30 + 10));
        //最后就是重新绘制echarts
        myChart.setOption({
          series: {
            data: data,
          },
          xAxis: { data: time },
        });
      }, 10000);

      option && myChart.setOption(option);
      })
    },
  },
  mounted() {
    this.t_bianhao = this.$store.state.t_bianhao;
    this.main = Date.now() + Math.random();
    console.log(this.main)
    this.bingzhuang();
    this.chaxun();
  },
};
</script>

<style>
</style>